<template>
  <div>
    <navigation-component ref="navigationComponent" :openSearchComponent="openSearchComponent" :changeAreaDialog="changeAreaDialogControl"/>
    <search-component ref="searchComponent"/>
    <div style="margin-top: 60px"></div> 
    <router-view />
  </div>
  <!-- <bottom-component/> -->
  <el-dialog style="max-width:500px" width="50%" v-model="changeAreaDialog" title="切换地区">
    <change-area-dialog-component :changeAreaDialogControl="changeAreaDialogControl" />
  </el-dialog>
</template>
<script>
import NavigationComponent from "./components/NavigationComponent.vue";
import SearchComponent from "./components/SearchComponent.vue";
import ChangeAreaDialogComponent from "./components/ChangeAreaDialogComponent.vue";
// import BottomComponent from './components/BottomComponent.vue';

export default {
  components: { NavigationComponent,SearchComponent,ChangeAreaDialogComponent },
  data(){
    return{
      changeAreaDialog:false,
      openSearchComponent:()=>{
        this.$refs.searchComponent.searchSwitch(true)
      }
    }
  },
  methods:{
    changeAreaDialogControl(status){
      this.changeAreaDialog=status
    },
  },
  watch:{
    $route(to){
      this.$store.state.routePath=to.path
    }
  }
};
</script>
<style scoped>
#app{
  width: 100%;
}
</style>
